{% load staticfiles %}
{% load compress %}
<div id="comments-box" article_id="{{ article.id }}" user_id="{{ user.id }}" user_name="{{ user.username }}">
    <form class="layui-form" action="">
        <div class="layui-form-item">
            <textarea class="layui-textarea" v-model="commentsBoxContent" required placeholder="输入要评论的内容..."
                      name="content"
                      lay-verify="required"></textarea>
        </div>
        <div class="layui-form-item">
            <button type="submit" class="layui-btn" lay-submit lay-filter="commentsForm" id="comment-button">提交评论
            </button>
        </div>
    </form>
</div>

<div id="comments">
    <div class="layui-row layui-col-space10" v-for="comment of comments">
        <div class="layui-col-md1">
            <img style=" width: 34px;height: 34px;display: flex;border-radius: 50%;align-items: center;justify-content: center;overflow: hidden;"
                 src="/static/img/timg.jpg"/>
        </div>
        <div class="layui-col-md11" style="line-height: 30px">
            <a style="font-size:x-large;color: #406599" v-text="comment.people"
               :href="'/author_article/'+ comment.people"
               target="_blank"></a>
            <span style="color: darkgray;font-size: small" v-text="comment.com_time"></span>
            <p v-text="comment.content"></p>
            <div>
                <a href style="color: #406599" @click.prevent="openReply(comment.id,comment.people)"
                   v-text="reply.ShowclickedCommentId != comment.id?'回复':'收起'"></a>
                <a v-if="comment.cid.length> 0" href style="color: #406599"
                   @click.prevent="openReplyContent(comment.id)"
                   v-text="ShowReplyContentID != comment.id?- comment.cid.length+'条回复↓':'- 收起回复↑'"></a>
                <div class="layui-form-item" v-show="reply.ShowclickedCommentId === comment.id">
                    <div class="layui-input-inline" style="margin-left:0;width: 80%">
                        <input type="text" class="layui-input" style="padding-left: 0;" v-model="reply.replyText"
                               :placeholder="reply.replyPlaceholder">
                    </div>
                    <button class="layui-btn" style="display: inline-block" @click="commitReply(comment.id)">评论</button>
                </div>
            </div>
            <div style="margin-left: 10px;border-left: 1px dashed #ccc;padding-left: 10px;"
                 v-show="ShowReplyContentID === comment.id">
                <show-reply-comments :comments="comment.cid" :reply="reply"
                                     :fpeople="comment.people"></show-reply-comments>
            </div>
            <hr class="layui-bg-gray">
        </div>

    </div>

</div>
{% compress js %}
    <script src="{% static 'js/comments.js' %}"></script>
{% endcompress %}